<template>
  <div class="app-container new-content">
    <div class="notice">
      <img alt="401" style="width:14px;height:16px" class="pic-error-child left" src="@/assets/wisdom/message.png">
      距离下一核验呈报周期截止时间还有{{authData.day}}天
    </div>
    <el-row :gutter="20" class="panel-group">
      <el-col :span="15" class="card-box">
        <el-card style="height:300px;margin-bottom:27px;" :body-style="{padding: '20px 53px'}">
          <h1 class="ft28 mb18">本期核验概括</h1>
          <span class="ft22">{{authData.startTime}}～{{authData.endTime}}</span>
          <el-row :gutter="20" class="mt56">
            <el-col :span="8">
              <div class="ft22">社区总人数</div>
              <div class="ft18 mt37"><span class="ft30">{{data1.monthAuthNum}}</span>人</div>
            </el-col>
            <el-col :span="8">
              <div class="ft22">未认证人数</div>
              <div class="ft18 mt37"><span class="ft30 col1">{{data1.noAuthCount}}</span>人</div>
            </el-col>
            <el-col :span="8">
              <div class="ft22">已认证人数</div>
              <div class="ft18 mt37"><span class="ft30 col2">{{data1.authCount}}</span>人</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="9" class="card-box">
        <el-card style="height:301px" :body-style="{padding: '20px 53px'}">
          <h1 class="ft28 mb27">消息中心</h1>
          <ul class="ft20 message">
            <li @click="dialogMessage(item)" v-for="item in noticeList" :key="item.id" class="information-title">
              {{item.title}}
              <!--               <el-link v-if="item.status == 0" type="danger">未读</el-link>-->
              <!--              <el-link v-if="item.status == 1" type="info">已读</el-link>-->
            </li>
          </ul>
          <div class="pagination-container">
            <el-pagination layout="prev, pager, next" :page-size="msgData.pageNum" :page-count="msgData.pageTotal"
                           @current-change="handleCurrentChange">
            </el-pagination>

          </div>
        </el-card>

      </el-col>
    </el-row>


    <h1 class="mt58 mb25 ft28" style="margin-top:28px">认证信息</h1>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <span class="bd6"></span>
          <h1 style="font-size:22px">近期认证情况</h1>
          <div style="width:100%;height:325px">
            <el-table :data="tableData" style="width: 100%;margin-top:30px">
              <el-table-column prop="name" label="人员" align="center" />
              <el-table-column prop="verTime" label="核验时间" align="center" />
              <el-table-column prop="verType" align="center" label="认证方式">
                <template slot-scope="scope">
                  <div v-show="scope.row.verType == 0">无感认证</div>
                  <div v-show="scope.row.verType == 1">本人认证</div>
                  <div v-show="scope.row.verType == 2">他人认证</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <span class="bd6"></span>
          <h1 style="font-size:22px">认证时间段</h1>
          <div id="timechart" style="width:100%;height:353px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <span class="bd6"></span>
          <h1 style="font-size:22px">已认证人员占比</h1>
          <div class="h413">
            <div id="areachart" style="width:100%;height:313px;padding-top:90px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <h1 class="mt58 mb25 ft28">人员信息</h1>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <span class="bd6"></span>
          <h1 style="font-size:22px">人员分布占比</h1>
          <div class="h413">
            <div id="piechart" style="width:100%;height:313px;padding-top:90px"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <span class="bd6"></span>
          <h1 style="font-size:22px">构成年龄</h1>
          <div class="h413">
            <div id="agechart" style="width:100%;height:313px;padding-top:90px"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <span class="bd6"></span>
          <h1 style="font-size:22px">认证方式占比</h1>
          <div class="h413">
            <div id="authchart" style="width:100%;height:353px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="阅读消息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>{{message}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="未读消息" :visible.sync="alertVisible" width="30%" :before-close="handleCloseAlert">
      <ul class="ft20 message" style="height:300px">
        <li @click="dialogMessage(item)" style="font-size:16px" v-for="item in alertList" :key="item.id">
          {{item.title}}
        </li>
      </ul>
      <!-- <div class="pagination-container" style="margin-left:40px">
          <el-pagination
            layout="prev, pager, next"
            :page-size="alertData.pageNum" :total="alertData.pageTotal"  @current-change="handleCurrentChange">
          </el-pagination>
        </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="readMessages()">知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCommunityAuthCount,
  getHomeAuthUserVo,
  getHomeMessage,
  getHomeTimeRegionVo,
  getTotalCount,
  getBlockAuthCount,
  getHomeAreaRegionVo,
  getHomeDoingVo,
  readMessage,
  readAllMessage,
  getYiRenZheng
} from "../../../../api/dashboard";
import {
  fetchDataPost
} from '../../../../api/verification';
var queryRequest = {
  url: "/home/all/getHomeAuthUserVo"
};
export default {
  name: 'Shequ',
  data() {
    return {
      SysSetting: {
        totalreductions: 0,
        totalbills: 0,
        totallargeamounts: 0,
        totalforwardpays: 0
      },
      syskey: '',
      noticeImg: '/src/assets/wisdom/message.png',
      chart: null,
      checkboxGroup1: [],
      data1: {
        "count": 0,
        "monthAddCount": 0,
        "countTotal": 0,
        "authCount": 0,
        "noAuthCount": 0,
        "deathCount": 0,
        "enableCount": 0,
        "startTime": "",
        "endTime": "",
        "day": 0
      },
      notice: {},
      data2: {
        authCount: 0,
        count: 0,
        deathCount: 0,
        enableCount: 0,
        monthAddCount: 0,
        noAuthCount: 0,
      },
      msgData: {
        "pageNum": 1,
        // "status": 0,
        "pageSize": 4,
        "pageTotal": 0
      },
      authData: {
        "count": 0,
        "reportCount": 0,
        "noReportCount": 0,
        "startTime": 0,
        "endTime": 0,
        "day": 0
      },
      noticeList: {},
      pagination: {
        currentPage: 1,
        pagesize: 20,
        pageTotal: 0
      },
      areaData: {
        "name": "",
        "count": 0
      },
      residentData: {
        "numberCount": {
          "number": 0,
          "enableNumber": 0,
          "deathNumber": 0,
          "number80": 0,
          "number8089": 0,
          "number9099": 0,
          "number100": 0,
          "otherPer": ""
        },
        "authTypeCount": {
          "wgCount": 0,
          "myselfCount": 0,
          "otherCount": 0
        },
        "authSiteCount": {
          "authSite": "",
          "count": 0
        }
      },
      doData: {},
      tableData: [],
      query: {
        pageNum: 1,
        pageSize: 10,
      },
      message: '',
      dialogVisible: false,
      alertData: {
        "pageNum": 1,
        "status": 0,
        "pageSize": 10000,
        "pageTotal": 1
      },
      alertList: [],
      alertVisible: false
    }
  },
  created() {
    this.InitDictItem()
  },
  mounted() {

    this.initAgeCharts();
    this.initPeopleCharts();
    this.initTimeCharts();
    this.initAuthCharts();
    this.initAreaCharts();
  },
  methods: {
    handleCloseAlert(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            this.alertVisible = false
            done();
          })
          .catch(_ => {});
    },
    readMessages() {
      let param = []
      this.alertList.forEach((item, index, arr) => {
        param[index] = item.id
      })
      readAllMessage(param).then(res => {
        this.alertVisible = false
      });
    },
    dialogMessage(row) {
      this.dialogVisible = true
      this.message = row.message

      readMessage({
        'url': '/home/all/read/message/{id}',
        'id': row.id
      }).then(res => {
        this.messageList()
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    /**
     * 选择每页显示数量
     */
    handleSizeChange(val) {
      this.query.pageSize = val
      this.query.currentPage = 1
      this.getData()
    },
    /**
     * 选择当页面
     */
    handleCurrentChange(val) {
      this.msgData.pageNum = val
      this.messageList()
    },
    initAgeCharts() {
      getTotalCount().then(res => {

        let myChart = this.$echarts.init(document.getElementById('agechart'))
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 0,
            top: 35,
            bottom: 20,
            textStyle: {
              fontSize: 18
            }
          },
          color: ['#F66A55', '#FEBF5E', '#09B76E', 'blue'],
          series: [{
            name: '居民年龄分布',
            type: 'pie',
            radius: ['60%', '45%'],
            center: ['35%', '30%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [{
              value: res.data.numberCount.number80 ? res.data.numberCount.number80 : 0,
              name: '80岁以下'
            }, {
              value: res.data.numberCount.number8089,
              name: '80-89岁'
            }, {
              value: res.data.numberCount.number9099,
              name: '90-99岁'
            }, {
              value: res.data.numberCount.number100,
              name: '100岁+'
            }, ]
          }]
        })
      });
    },
    // 人员占比
    initPeopleCharts() {

      let myChart = this.$echarts.init(document.getElementById('piechart'))
      getHomeAreaRegionVo().then(res => {

        var arr = [];
        res.data.forEach(function (value, key) {
          arr.push({
            'name': value.name,
            'value': value.count ? value.count : 0
          })
        })


        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 0,
            top: 35,
            bottom: 20,
            textStyle: {
              fontSize: 18
            }
          },
          color: ['#F66A55', '#00C0FF', '#09B76E', '#FEBF5E', '#1869A0', '#FF9393', '#FFB6C1', '#FF1493',
            '#8B008B'
          ],
          series: [{
            name: '人员占比分布',
            type: 'pie',
            radius: '60%',
            center: ['30%', '30%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: arr
          }]
        })
      });
    },
    // 人员占比
    initAreaCharts() {
      let myChart = this.$echarts.init(document.getElementById('areachart'))
      getYiRenZheng().then(res => {

        var arr = [];
        res.data.forEach(function (value, key) {
          arr.push({
            'name': value.name,
            'value': value.count ? value.count : 0
          })
        })

        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 0,
            top: 35,
            bottom: 20,
            textStyle: {
              fontSize: 18
            }
          },
          color: ['#F66A55', '#FEBF5E', '#09B76E', 'blue'],
          series: [{
            name: '已认证人员占比',
            type: 'pie',
            radius: ['60%', '45%'],
            center: ['35%', '30%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: arr
          }]
        })
      });
    },
    initCharts() {
      let myChart = this.$echarts.init(document.getElementById('piechart'))
      getHomeAreaRegionVo().then(res => {
        var arr = [];
        res.data.forEach(function (value, key) {
          arr.push({
            'name': value.name,
            'value': value.count ? value.count : 0
          })
        })
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 35,
            bottom: 20,
          },
          color: ['#F66A55', '#00C0FF', '#09B76E', '#FEBF5E', '#1869A0', '#FF9393', '#FFB6C1', '#FF1493',
            '#8B008B'
          ],
          series: [{
            name: '人员占比分布',
            type: 'pie',
            radius: '60%',
            center: ['30%', '30%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: arr
          }]
        })
      });
    },
    initTimeCharts() {

      getHomeTimeRegionVo().then(res => {
        let xData = []
        let yData = []
        res.data.forEach(function (value, key) {
          xData.push(value.authTime)
          yData.push(value.count)
        })
        let myChart = this.$echarts.init(document.getElementById('timechart'))
        myChart.setOption({
          xAxis: {
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'value'
          },
          color: ['#7F4CFD'],
          series: [{
            data: yData,
            type: 'line',
            smooth: true
          }]
        })
      });

    },
    initAuthCharts() {

      let myColor = ['#5551FE', '#f66a55', '#febf5e']

      getTotalCount().then(res => {
        let myChart = this.$echarts.init(document.getElementById('authchart'))
        var arr = [res.data.authTypeCount.wgCount,
          res.data.authTypeCount.myselfCount,
          res.data.authTypeCount.otherCount
        ];
        myChart.setOption({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          color: ['#F66A55', '#00C0FF', '#09B76E', '#FEBF5E', '#1869A0', '#FF9393', '#FFB6C1', '#FF1493',
            '#8B008B'
          ],
          legend: {},
          grid: {
            left: 0,
            top: 15,
            right: '30',
            bottom: '0',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            //'time'-时间轴;'log'-对数轴
            splitLine: {
              show: false
            }, //坐标轴在 grid 区域中的分隔线
            axisLabel: {
              show: false
            }, //坐标轴刻度标签
            axisTick: {
              show: false
            }, //坐标轴刻度
            axisLine: {
              show: false
            }, //坐标轴轴线

          },
          yAxis: {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: 'rgba(0,0,0,.7)',
              fontSize: 10
            },

            data: ['无感认证人数', '本人认证人数', '他人认证人数']
          },
          series: [{
            name: '', //系列名称
            type: 'bar', //柱状、条形图
            barWidth: 19, //柱条的宽度,默认自适应
            data: arr, //系列中数据内容数组
            label: { //图形上的文本标签
              show: true,
              position: 'right', //标签的位置
              offset: [0, -0], //标签文字的偏移，此处表示向上偏移40
              formatter: '{c}{a}', //标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
              color: 'rgba(0,0,0,.7)', //标签字体颜色
              fontSize: 20 //标签字号
            },
            itemStyle: { //图形样式
              normal: { //normal 图形在默认状态下的样式;
                //emphasis图形在高亮状态下的样式
                barBorderRadius: 10, //柱条圆角半径,单位px.
                //此处统一设置4个角的圆角大小;
                //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
                color: function (params) {
                  let num = myColor.length; //得到myColor颜色数组的长度
                  return myColor[params.dataIndex % num]; //返回颜色数组中的一个对应的颜色值
                },
              }
            },
            zlevel: 1 //柱状图所有图形的 zlevel 值,
          }, ]
        })
      });
    },
    /**
     * 初始化数据
     */
    InitDictItem() {
      let param = this.alertData
      getHomeMessage(param).then(res => {
        if (res.data.total >= 1) {
          this.alertVisible = true
          this.alertList = res.data.list
          this.alertData.pageTotal = res.data.pages || 1;
        }
      });
      //获取居民列表
      getCommunityAuthCount().then(res => {
        this.data1 = res.data
      });

      queryRequest.data = this.query;
      fetchDataPost(queryRequest).then(res => {
        this.tableData = res.data.list.slice(0, 6);
      });

      getBlockAuthCount().then(res => {
        this.authData = res.data
      });

      //获取居民列表
      getHomeAuthUserVo().then(res => {

      });

      getHomeDoingVo().then(res => {
        this.doData = res.data
      });

      this.messageList()

    },
    messageList() {
      //获取居民列表
      let param = this.msgData
      getHomeMessage(param).then(res => {
        this.noticeList = res.data.list
        this.msgData.pageTotal = res.data.pages || 1;

      });

    },
    toPage(pageUrl) {
      // 直接跳转
      this.$router.push('/' + pageUrl)
    },
    loadsysType() {
      var data = {
        openmf: this.syskey,
        appId: defaultSettings.appId,
        systemCode: defaultSettings.activeSystemCode
      }
      this.loading = true
      this.$store
          .dispatch('user/sysConnetLogin', data)
          .then(res => {
            // window.location.href = res.data.ActiveSystemUrl
            this.loading = false
          })
          .catch(res => {
            this.loading = false
          })
    }
  }
}
</script>

<style lang="scss" scoped>
.mt58 {
  margin-top: 58px;
}

.mb25 {
  margin-bottom: 25px;
}

.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}

.systeminfo {
  line-height: 25px;
  float: left;
  width: 50%;
  margin-bottom: 20px;

  .lidiv {
    line-height: 25px;
  }
}

.notice {
  height: 30px;
  line-height: 30px;
  padding-left: 26px;
  position: relative;
  color: #4940FD;
  font-size: 16px;

  img {
    position: absolute;
    left: 0;
    top: 7px;
  }
}

.el-card {
  border-radius: 30px;
  box-shadow: none;
  border: 0;


}

.ft22 {
  font-size: 22px;
  color: #999999;
}

.ft23 {
  font-size: 20px;
  color: #333333;
}

.ft28 {
  font-size: 28px;
  color: #333333;
  font-weight: 600;
}

.ft18 {
  font-size: 18px;
  color: #999999;
}

.ft19 {
  font-size: 18px;
  color: #333333;
  margin-top: 22px;
}

.mb18 {
  margin-bottom: 18px;
}

.mt37 {
  margin-top: 18.5px;
}

.mt56 {
  margin-top: 36px;
}

.mb27 {
  margin-bottom: 27px;
}

.ft30 {
  font-size: 30px;
  color: #333333;
  font-weight: 800;
  padding-right: 6px;
}

.col1 {
  color: #1BB358;
}

.col2 {
  color: #EB7429;
}

.col3 {
  color: #FEBF5E;
}

.ftw {
  font-weight: bold;
  font-size: 26px;
}

.pdl10 {
  padding-left: 10px;
}

.h413 {
  height: 353px;
}

.el-card .el-checkbox {
  margin-left: 10px;
  height: 35px;
  line-height: 35px;
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  margin-bottom: 16px;
}


.el-checkbox.is-bordered.el-checkbox--mini {
  padding: 0px 10px 0px 10px;
}

.ft20 {
  font-size: 20px;
  color: #666666;
  list-style: none;
}

.message {
  display: block;
  overflow: auto;
}

.message li {
  cursor: pointer;
  margin-bottom: 16px;
}

.bd6 {
  display: block;
  width: 6px;
  height: 22px;
  float: left;
  background-color: #4940FD;
  margin-top: 5px;
  margin-right: 6px;
}

.information-title {
  font-size: 18px;
  width: 100%;
  /*一定要设置宽度，或者元素内含的百分比*/
  overflow: hidden;
  /*溢出的部分隐藏*/
  white-space: nowrap;
  /*文本不换行*/
  text-overflow: ellipsis;
  /*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
}
</style>